<template>
    <div class="index-container">
        <!-- 欢迎横幅 -->
        <div class="welcome-banner">
            <div class="banner-content">
                <h1 class="welcome-title">欢迎来到 Haoke 平台</h1>
                <p class="welcome-subtitle">知识聚集流通的现代化平台</p>
                <div class="banner-features">
                    <div class="feature-item">
                        <el-icon><Document /></el-icon>
                        <span>知识交流</span>
                    </div>
                    <div class="feature-item">
                        <el-icon><ShoppingCart /></el-icon>
                        <span>智能购物</span>
                    </div>
                    <div class="feature-item">
                        <el-icon><Star /></el-icon>
                        <span>精品推荐</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 功能模块卡片 -->
        <div class="modules-container">
            <div class="modules-grid">
                <div class="module-card" @click="navigateTo('Article')">
                    <div class="card-icon">
                        <el-icon><Document /></el-icon>
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">论坛社区</h3>
                        <p class="card-description">与同行交流经验，分享知识见解</p>
                        <div class="card-stats">
                            <span class="stat-item">
                                <el-icon><User /></el-icon>
                                10k+ 用户
                            </span>
                            <span class="stat-item">
                                <el-icon><ChatDotRound /></el-icon>
                                1k+ 讨论
                            </span>
                        </div>
                    </div>
                    <div class="card-action">
                        <el-button type="primary" text>
                            立即探索
                            <el-icon><ArrowRight /></el-icon>
                        </el-button>
                    </div>
                </div>

                <div class="module-card" @click="navigateTo('Shopping')">
                    <div class="card-icon shopping">
                        <el-icon><ShoppingCart /></el-icon>
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">智能商城</h3>
                        <p class="card-description">精选商品，智能推荐，优质购物体验</p>
                        <div class="card-stats">
                            <span class="stat-item">
                                <el-icon><Goods /></el-icon>
                                5k+ 商品
                            </span>
                            <span class="stat-item">
                                <el-icon><Star /></el-icon>
                                4.8 评分
                            </span>
                        </div>
                    </div>
                    <div class="card-action">
                        <el-button type="success" text>
                            开始购物
                            <el-icon><ArrowRight /></el-icon>
                        </el-button>
                    </div>
                </div>

                <div class="module-card" @click="navigateTo('User')">
                    <div class="card-icon topic">
                        <el-icon><Reading /></el-icon>
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">个人中心</h3>
                        <p class="card-description">管理个人信息，查看订单和地址</p>
                        <div class="card-stats">
                            <span class="stat-item">
                                <el-icon><User /></el-icon>
                                个人信息
                            </span>
                            <span class="stat-item">
                                <el-icon><TrendCharts /></el-icon>
                                数据统计
                            </span>
                        </div>
                    </div>
                    <div class="card-action">
                        <el-button type="warning" text>
                            进入中心
                            <el-icon><ArrowRight /></el-icon>
                        </el-button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 最新动态 -->
        <div class="latest-updates">
            <h2 class="section-title">最新动态</h2>
            <div class="updates-grid">
                <el-card class="update-card" shadow="hover">
                    <template #header>
                        <div class="update-header">
                            <el-icon><Bell /></el-icon>
                            <span>系统公告</span>
                        </div>
                    </template>
                    <p>平台升级完成，新增多项功能特性</p>
                    <div class="update-time">2小时前</div>
                </el-card>

                <el-card class="update-card" shadow="hover">
                    <template #header>
                        <div class="update-header">
                            <el-icon><Trophy /></el-icon>
                            <span>活动推荐</span>
                        </div>
                    </template>
                    <p>春季促销活动火热进行中，限时优惠</p>
                    <div class="update-time">1天前</div>
                </el-card>

                <el-card class="update-card" shadow="hover">
                    <template #header>
                        <div class="update-header">
                            <el-icon><Star /></el-icon>
                            <span>精选推荐</span>
                        </div>
                    </template>
                    <p>本周精选文章和商品推荐</p>
                    <div class="update-time">2天前</div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { 
    Document, 
    ShoppingCart, 
    Reading, 
    User, 
    Star, 
    ArrowRight, 
    ChatDotRound, 
    Goods, 
    TrendCharts,
    Bell,
    Trophy
} from '@element-plus/icons-vue'

const router = useRouter()

// 导航到指定页面
const navigateTo = (routeName) => {
    router.push({ name: routeName })
}
</script>

<style lang="less" scoped>
.index-container {
    padding: 0;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
}

.welcome-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 60px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="rgba(255,255,255,0.1)"><polygon points="1000,100 1000,0 0,100"/></svg>');
        background-size: cover;
    }
    
    .banner-content {
        position: relative;
        z-index: 1;
        max-width: 800px;
        margin: 0 auto;
    }
    
    .welcome-title {
        font-size: 48px;
        font-weight: 700;
        margin-bottom: 16px;
        letter-spacing: 2px;
        animation: slideInDown 1s ease-out;
    }
    
    .welcome-subtitle {
        font-size: 20px;
        opacity: 0.9;
        margin-bottom: 40px;
        animation: slideInUp 1s ease-out 0.3s both;
    }
    
    .banner-features {
        display: flex;
        justify-content: center;
        gap: 40px;
        animation: fadeIn 1s ease-out 0.6s both;
        
        .feature-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 16px;
            
            .el-icon {
                font-size: 20px;
            }
        }
    }
}

.modules-container {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.module-card {
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(45deg, #667eea, #764ba2);
    }
    
    &:hover {
        transform: translateY(-8px);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
    }
    
    .card-icon {
        width: 80px;
        height: 80px;
        border-radius: 20px;
        background: linear-gradient(45deg, #667eea, #764ba2);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        
        &.shopping {
            background: linear-gradient(45deg, #11998e, #38ef7d);
        }
        
        &.topic {
            background: linear-gradient(45deg, #f093fb, #f5576c);
        }
        
        .el-icon {
            font-size: 36px;
            color: white;
        }
    }
    
    .card-content {
        margin-bottom: 20px;
        
        .card-title {
            font-size: 24px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 12px;
        }
        
        .card-description {
            color: #7f8c8d;
            line-height: 1.6;
            margin-bottom: 16px;
        }
        
        .card-stats {
            display: flex;
            gap: 20px;
            
            .stat-item {
                display: flex;
                align-items: center;
                gap: 4px;
                font-size: 14px;
                color: #95a5a6;
                
                .el-icon {
                    font-size: 16px;
                }
            }
        }
    }
    
    .card-action {
        display: flex;
        justify-content: flex-end;
    }
}

.latest-updates {
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
    
    .section-title {
        text-align: center;
        font-size: 32px;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 40px;
    }
    
    .updates-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
        
        .update-card {
            transition: transform 0.3s ease;
            
            &:hover {
                transform: translateY(-4px);
            }
            
            .update-header {
                display: flex;
                align-items: center;
                gap: 8px;
                font-weight: 600;
                color: #2c3e50;
            }
            
            .update-time {
                font-size: 12px;
                color: #95a5a6;
                margin-top: 10px;
            }
        }
    }
}

/* 动画效果 */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .welcome-title {
        font-size: 32px;
    }
    
    .welcome-subtitle {
        font-size: 16px;
    }
    
    .banner-features {
        flex-direction: column;
        gap: 20px;
    }
    
    .modules-grid {
        grid-template-columns: 1fr;
    }
    
    .module-card {
        padding: 20px;
    }
    
    .updates-grid {
        grid-template-columns: 1fr;
    }
}
</style> 